import React, { useState } from "react";
import styled from "styled-components"

const Wrapper = styled.section`
  font-size: 24px;
  > ul {
    display: flex;
    align-items: center;
    > li {
      text-align: center;
      width: 50%;
      padding: 16px 0;
      position: relative;
      &.selected::after {
        content: '';
        display: block;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        background: #333;
      }
    }
  }
`
type Props = {
  value: '-' | '+',
  onChange: (value: '-' | '+')=> void
};
const CategorySection: React.FC<Props> = (props) => {
  const categoryMap = {'-': '支出', '+': '收入'};
  const [categoryList] = useState<('-' | '+')[]>(['-', '+']);
  //可写上面这种也可以写下面哪种
  // type Keys = keyof typeof categoryMap;
  // const [categoryList] = useState<Keys[]>(['-', '+']);
  const category = props.value;
  return (
    <Wrapper> 
      <ul>
        {categoryList.map(c => 
          <li 
            key={c}
            className={category === c? 'selected' : ''}
            onClick={()=> {props.onChange(c)}}
          >{categoryMap[c]}</li>  
        )}
      </ul>
    </Wrapper>
  )
}
export { CategorySection }